<template>
  
  <div class="login-container">
    <div >
          <img src="../../assets/image.png" alt="" height="400px" width="400px">
        </div>
    <div class="login-box">
      <h1 class="login-title">登录</h1>
      <van-form v-model="formData">
        <van-field
          v-model="formData.phone"
          label="手机号码"
          type="phone"
          placeholder="请输入手机号"
          border-bottom
          left-icon="phone"
        />
        <van-field
          v-model="formData.password"
          label="密码"
          type="password"
          placeholder="请输入密码"
          border-bottom
          left-icon="lock"
        >
          <template #button>
            <van-button type="link" size="small" @click="handleForgotPassword">忘记密码</van-button>
          </template>
        </van-field>
        <van-button type="primary" round block class="login-btn" @click="handleLogin1">登录</van-button>
        <div class="switch-login">
          <van-button type="link" size="small" @click="switchToSMSLogin">手机验证码登录</van-button>
        </div>
        <div class="third-party-line">
          <span class="line"></span>
          <span>或通过以下方式登录</span>
          <span class="line"></span>
        </div>
        <div class="third-party-icons">
    <a :href="`/third-party/1.png`" @click.prevent="handleIconClick">
      <img 
        src="../../assets/1.png" 
        alt="" 
        width="50" 
        height="50" 
      >
    </a>
    <a :href="ddurl">
      <img 
        src="../../assets/8.png" 
        alt="" 
        width="50" 
        height="50" 
      >
    </a>
    <a :href="`/third-party/3.png`" @click.prevent="handleIconClick2">
      <img 
        src="../../assets/3.png" 
        alt="" 
        width="50" 
        height="50" 
      >
    </a>
    <a :href="`/third-party/4.png`" @click.prevent="handleIconClick3">
      <img 
        src="../../assets/4.png" 
        alt="" 
        width="50" 
        height="50" 
      >
    </a>
    <a :href="`/third-party/5.png`" @click.prevent="handleIconClick('5.png')">
      <img 
        src="../../assets/5.png" 
        alt="" 
        width="50" 
        height="50" 
      >
    </a>
  </div>
        <van-checkbox v-model="formData.agree" class="privacy-checkbox">
          我已阅读并同意
          <a href="/privacy" class="privacy-link">《种草平台隐私政策》</a>
        </van-checkbox>
      </van-form>
    </div>
  </div>
 
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { Toast } from 'vant'
import { useRouter } from 'vue-router'
import axios from 'axios'
import http from "../../http/index";
onMounted(() => {  
  geturl(); 
}) 
const router = useRouter()
const handleForgotPassword = () => router.push('/PhoneVerify')
const switchToSMSLogin = () => router.push('/Login')
const handleIconClick = () => router.push('/zhifu')
// const handleIconClick1 = () => router.push('/taobao')
const handleIconClick2 = () => router.push('/weixin')
const handleIconClick3 = () => router.push('/qq')
const ddurl = ref()
// const geturl=()=>{
//   http.get('http://127.0.0.1:8000/myapp/DingdingUrl/').then(res=>{
//     ddurl.value = res.data.url
//   })
// }
const geturl = () => {  
  http.get('http://127.0.0.1:8000/myapp/ThirdPartyLoginUrl/dingding/').then(res => {  
    ddurl.value = res.data.url  
  })  
}  
const formData = ref({
  phone: '',
  password: '',
  agree: false
})
// 登录
function handleLogin1 () {
  axios.post(`http://127.0.0.1:8000/myapp/phone_password_login/`,formData.value).then((resp) => {
    console.log(resp);
    localStorage.setItem('token',resp.data.token)
    localStorage.setItem('user_id',resp.data.user_id)
    router.push('/UserCenter')
    Toast('登录成功')
  })
  
}
// 登录处理
const handleLogin = () => {
  if (!formData.value.agree) {
    Toast('请同意隐私政策')
    return
  }
  if (!formData.value.phone) {
    Toast('请输入手机号')
    return
  }
  if (!formData.value.password) {
    Toast('请输入密码')
    return
  }
  Toast('登录功能待对接后端接口')
}
</script>

<style scoped>
/* 可选：添加鼠标悬停样式增强交互感 */
.third-party-icons img {
  cursor: pointer; /* 显示点击手势 */
  transition: transform 0.2s;
}
.third-party-icons img:hover {
  transform: scale(1.05);
}
.login-container {
  position: relative;
  min-height: 100vh;
  background: #f5f5f5;
}
.bg-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 15px;
  width: 90%;
  max-width: 400px;
}
.login-title {
  text-align: center;
  font-size: 24px;
  margin: 20px 0;
}
.login-btn {
  background: #ff8695;
  border-color: #ff8695;
  color: white;
  margin-bottom: 15px;
}
.switch-login {
  text-align: center;
  margin: 10px 0;
}
.third-party-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
.third-party-line .line {
  flex: 1;
  height: 1px;
  background: #e0e0e0;
}
.third-party-line span:nth-child(2) {
  margin: 0 15px;
  color: #666;
  font-size: 14px;
}
.third-party-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.icon-item {
  color: #666;
}
.privacy-checkbox {
  margin-top: 15px;
  justify-content: start;
}
.privacy-link {
  color: #1989fa;
}

</style>